<template>
  <q-layout view="lHh Lpr lFf" class="bg-background padding-page">
    <!-- 移动端的菜单 -->
    <q-drawer
      elevated
      side="left"
      :width="180"
      v-model="leftDrawerOpen"
      behavior="mobile"
      style="font-size: 1.2em"
      class="text-right"
    >
      <q-list separator>
        <q-item
          v-for="page in pages"
          :key="page.label"
          active-class="text-accent"
          :to="{ name: page.routerName }"
        >
          <q-item-section>{{ page.label }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>
    <div v-show="!smallScreen" class="q-px-md bg-white">
      <q-img height="115px" src="/assets/index/header.png"></q-img>
    </div>
    <!-- 菜单 -->
    <!-- 打开左侧抽屉的按钮 -->
    <q-toolbar v-show="smallScreen" class="text-white bg-primary">
      <q-btn flat round dense icon="menu" @click="toggleLeftDrawer" />
      <q-space />
      <router-link class="text-white text-h6" :to="{ name: 'IndexPage' }"
        >Pancan-MNVQTL</router-link
      >
      <q-space />
    </q-toolbar>
    <div class="bg-white">
      <div
        class="row justify-around items-center bg-primary"
        v-show="!smallScreen"
      >
        <q-tabs
          id="indexTab"
          stretch
          :shrink="true"
          active-color="amber-6"
          class="row justify-between text-white"
        >
          <q-route-tab
            v-for="page in pages"
            :key="page.label"
            :label="page.label"
            :to="{ name: page.routerName }"
            class="col-sm-auto"
            no-caps
            unelevated
            :ripple="false"
          />
        </q-tabs>
        <!-- 小工具按钮 -->
      </div>
    </div>
    <q-page-container class="bg-white">
      <q-page style="min-height: 100%">
        <router-view />
        <q-page-scroller
          position="bottom-right"
          :scroll-offset="60"
          :offset="[50, 50]"
        >
          <q-btn round icon="keyboard_arrow_up" color="primary" size="md" />
        </q-page-scroller>
      </q-page>
    </q-page-container>

    <SiteFooter />
  </q-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import SiteFooter from 'components/SiteFooter.vue';

const $q = useQuasar();

// 移动端导航菜单显示状态
const leftDrawerOpen = ref(false);
// 移动端导航菜单按钮行为
const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};
// 检测屏幕尺寸更改
const smallScreen = computed((): boolean => {
  return !$q.screen.gt.sm;
});
watch(smallScreen, () => {
  if (!smallScreen.value) {
    leftDrawerOpen.value = false;
  }
});

const pages = [
  {
    routerName: 'IndexPage',
    label: 'Home',
  },
  {
    routerName: 'apaQTLPage',
    label: 'apaQTL',
  },
  {
    routerName: 'eQTLPage',
    label: 'eQTL',
  },
  {
    routerName: 'lnceQTLPage',
    label: 'lncRNA-eQTL',
  },
  {
    routerName: 'mireQTLPage',
    label: 'miRNA-eQTL',
  },
  {
    routerName: 'meQTLPage',
    label: 'meQTL',
  },
  {
    routerName: 'sQTLPage',
    label: 'sQTL',
  },
  {
    routerName: 'SurvivalPage',
    label: 'Survival-QTL',
  },
  {
    routerName: 'GWASPage',
    label: 'GWAS-QTL',
  },
  {
    routerName: 'DownloadPage',
    label: 'Download',
  },
  {
    routerName: 'HelpPage',
    label: 'Help',
  },
];
</script>

<style lang="scss">
#indexTab .q-tab {
  min-height: 40px;

  .q-tab__label {
    font-size: 14px;
    font-weight: bold;
  }
}
a,
a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:hover {
  color: #ffca28;
}
</style>
